﻿@model IOA.MES.DataAccess.VModel.VBinningSchema
@{
    ViewBag.Title = "分档规则详情";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";

    var powers = ViewBag.Powers as List<IOA.MES.DataAccess.VModel.VBinningPower>;
}

<div id="page"></div>

<script type="text/template" id="tplPage">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.Name">规则名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" value="@Model.SchemaName" class="layui-input" readonly style="border-width:0;">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" v-html="lang.Field.CreateTime">创建时间：</label>
                        <div class="layui-input-inline">
                            <input type="text" value="@Model.CreateTime.ToString("yyyy-MM-dd HH:mm")" class="layui-input" readonly style="border-width:0;">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-normal layuiadmin-btn-list btnedit" type="button" @@click="editPower(0)">
                            <i class="layui-icon layui-icon-addition layuiadmin-button-btn"></i>添加功率档
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card">
            <div class="layui-card-body">
                <div v-if="powers.length<=0" style="text-align:center;padding:50px;">暂无功率挡位，请添加功率档</div>
                <div v-if="powers.length>0" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li v-for="(power, index) in powers" v-bind:class="{'layui-this': index==0 }">{{power.Power}}W</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item" v-for="(power, index) in powers" v-bind:class="{'layui-show': index==0 }">
                            <div class="layui-card">
                                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                                    <div class="layui-row">
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" v-html="lang.Field.RatedPower">额定功率：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.Power}}W</div>
                                        </div>
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" v-html="lang.Field.NameplateModel">铭牌型号：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.NameplateModel}}</div>
                                        </div>
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" v-html="lang.Field.PowerRange">功率范围：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.PowerMin}}-{{power.PowerMax}}W </div>
                                        </div>
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" style="line-height: 39px;">Pmax：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.Pmax}} </div>
                                        </div>
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" style="line-height: 39px;">Voc：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.Voc}} </div>
                                        </div>
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" style="line-height: 39px;">Isc：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.Isc}} </div>
                                        </div>
                                    </div>
                                    <div class="layui-row">
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" style="line-height: 39px;">Vmpp：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.Vmpp}} </div>
                                        </div>
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" style="line-height: 39px;">Impp：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.Impp}} </div>
                                        </div>
                                        <div class="layui-col-xs2 layui-inline">
                                            <label class="layui-form-label" style="line-height: 39px;">FF：</label>
                                            <div class="layui-input-inline" style="line-height:37px;">{{power.FF}} </div>
                                        </div>
                                        <div class="layui-col-xs6 layui-inline">
                                            <div class="layui-input-inline" style="line-height:37px;">
                                                <button class="layui-btn layui-btn-normal layuiadmin-btn-list" type="button" @@click="editPower(power.PkId)">
                                                    <i class="layui-icon layui-icon-edit layuiadmin-button-btn"></i>编辑当前功率档
                                                </button>
                                                <button class="layui-btn layui-btn-danger layuiadmin-btn-list" type="button" @@click="deletePower(power.PkId)">
                                                    <i class="layui-icon layui-icon-edit layuiadmin-button-btn"></i>删除当前功率档
                                                </button>
                                                <button class="layui-btn layuiadmin-btn-list btnedit" type="button" @@click="editCurrent(power.PkId,0)">
                                                    <i class="layui-icon layui-icon-addition layuiadmin-button-btn"></i>添加电流档
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card-body">
                                    <table v-bind:id="'table_'+power.PkId" v-bind:lay-filter="'table_'+power.PkId"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>


@section Scripts{
    <script>
        var powers = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(powers));
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                powers: powers,
                lang: JSON.parse(lang).package
            }
        });

        setTimeout(function () {
            initLayui();
        }, 100);
        function initLayui() {
            layui.use(['table', 'layer', 'element'], function () {
                var layer = layui.layer,
                    table = layui.table;

                for (var i = 0; i < vm.$data.powers.length; i++) {
                    var options = {
                        elem: "#table_" + vm.$data.powers[i].PkId
                        , id: "table_" + vm.$data.powers[i].PkId
                        , toolbar: ""
                        , url: '/ParaSetting/QueryBinningCurrents'
                        , method: "post"
                        , where: { powerId: vm.$data.powers[i].PkId }
                        , page: {
                            limit: 15
                            , limits: [15, 20, 25, 30, 40, 50]
                        }
                        , response: {
                            statusName: 'ErrCode'
                            , statusCode: 200
                            , msgName: 'ErrCode'
                            , countName: 'TotalCount'
                            , dataName: 'Data'
                        }
                        , cols: [[
                            { title: '序号', type: 'numbers', width: 60 }
                            , { field: 'LevelName', title: '电流档' }
                            , {
                                title: '电流范围', templet: function (d) {
                                    return d.CurrentMin + "-" + d.CurrentMax + "A"
                                }
                            }
                            , {
                                title: '操作', width: 200, templet: function (d) {
                                    var str = '<button class="layui-btn layui-btn-sm layui-btn-normal" onclick="editCurrent(' + d.PowerId + ', ' + d.PkId + ')"><i class="layui-icon">&#xe642;</i>编辑</button>\
                                           <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="deleteCurrent(' + d.PowerId + ', ' + d.PkId + ')"><i class="layui-icon">&#xe640;</i>删除</button>';
                                    return str;
                                }
                            }
                        ]]
                    };
                    table.render(options);
                }
            });
        }

        function editPower(powerId) {
            layer.open({
                type: 2,
                shade: [0.1, '#000'],
                area: ['500px', '650px'],
                content: "/ParaSetting/EditBinningPower?schemaId=@Model.PkId&powerId=" + powerId,
                end: function () {
                    location.reload();
                }
            });
        }

        function editCurrent(powerId, currentId) {
            layer.open({
                type: 2,
                shade: [0.1, '#000'],
                area: ['500px', '420px'],
                content: "/ParaSetting/EditBinningCurrent?powerId=" + powerId + "&currentId=" + currentId,
                end: function () {
                    layui.table.reload("table_" + powerId);
                }
            });
        }

        function deletePower(powerId) {
            layer.confirm('确定要删除当前功率档吗？', { icon: 3, title: '提示' }, function (index) {
                var loadId = layer.load();
                $.ajax({
                    url: "/ParaSetting/DeleteBinningPower?powerId=" + powerId,
                    complete: function () {
                        layer.close(loadId);
                    },
                    success: function (res) {
                        if (res.ErrCode != 200) {
                            layer.msg(res.ErrMsg, { icon: 5 });
                            return;
                        }
                        layer.msg("删除成功！", { icon: 6, time: 1500 });
                        location.reload();
                    }
                });
                layer.close(index);
            });
        }

        function deleteCurrent(powerId, currentId) {
            layer.confirm('确定要删除当前电流档吗？', { icon: 3, title: '提示' }, function (index) {
                var loadId = layer.load();
                $.ajax({
                    url: "/ParaSetting/DeleteBinningCurrent?currentId=" + currentId,
                    complete: function () {
                        layer.close(loadId);
                    },
                    success: function (res) {
                        if (res.ErrCode != 200) {
                            layer.msg(res.ErrMsg, { icon: 5 });
                            return;
                        }
                        layer.msg("删除成功！", { icon: 6, time: 1500 });
                        layui.table.reload("table_" + powerId);
                    }
                });
                layer.close(index);
            });
        }
    </script>
}
